<script lang="ts">
export default {
  name: "XLogin",
};
</script>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/home";
import { userStore } from "@/store/user";
const store = userStore();
const router = useRouter();
const data = reactive({
  account: "admin",
  password: "123456",
});
const toHome = () => {
  const userName = data.account;
  const passWord = data.password;
  login({ userName, passWord }).then(async (res: any) => {
    store.setAuth(res.auth);
    await store.setRoutes();
    router.push("/home");
  });
};
</script>

<template>
  <div class="body">
    <div class="wrap">
      <el-form label-width="120px">
        <h1>前女友后台管理系统</h1>
        <el-form-item label="账号:"
          ><el-input type="text" v-model="data.account"
        /></el-form-item>
        <el-form-item label="密码:"
          ><el-input type="password" v-model="data.password"
        /></el-form-item>

        <el-form-item>
          <el-button type="primary" @click="toHome"
            >登录</el-button
          ></el-form-item
        >
      </el-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .wrap {
    position: absolute;
    width: fit-content;
    height: fit-content;
  }
}
</style>
